<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="甘特图" data-page-identification="k_ko6hvkw5hl">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_3prxn0mxu3 自定义模板_x1ogqkqkx8 -->
      <div class="modal-title">
        <div class="left">
          <!--                    <a-radio-group v-model:value="state.radioValue" @change="radioChange">-->
          <!--                        <a-radio-button value="目标">目标</a-radio-button>-->
          <!--                        <a-radio-button value="项目">项目</a-radio-button>-->
          <!--                    </a-radio-group>-->
          <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
          <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
          <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
        </div>
        <div class="right">
          <div class="right-tip" v-if="state.radioValue === '项目'">
            <a-form-item label="项目名称">
              <a-select
                show-search
                style="width: 200px; overflow: hidden"
                :options="state.projectList"
                allow-clear
                placeholder="请选择"
                :field-names="{ label: 'projectName', value: 'projectId' }"
                :filter-option="
                                    (input, option) => {
                                        return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                "
                @focus="getProjectList"
                v-model:value="state.gantFilter.projectId"
                @change="getGantData"
              />
            </a-form-item>
          </div>

          <div class="right-tip" v-if="state.radioValue === '目标'">
            <!--                        <a-form-item-->
            <!--                            label="月份"-->
            <!--                            :labelCol="{ span: 8 }"-->
            <!--                            :wrapperCol="{ span: 16 }"-->
            <!--                            style="height: 32px; width: 300px"-->
            <!--                            name="month"-->
            <!--                        >-->
            <!--                            <a-date-picker-->
            <!--                                @change="getGantData"-->
            <!--                                picker="month"-->
            <!--                                style="width: 100%"-->
            <!--                                v-model:value="state.gantFilter.month"-->
            <!--                                value-format="YYYY-MM"-->
            <!--                                :allow-clear="false"-->
            <!--                            />-->
            <!--                        </a-form-item>-->
          </div>
          <div class="right-tip">
            <a-form-item label="任务类型">
              <a-select
                show-search
                style="width: 200px; overflow: hidden"
                :options="[
                                    {
                                        label: '全部',
                                        value: 'ALL'
                                    },
                                    {
                                        label: '关键路径任务',
                                        value: 'KEYNOTE'
                                    },
                                    {
                                        label: '其它',
                                        value: ' OTHER'
                                    },
                                    {
                                        label: 'SOP任务',
                                        value: 'SOP'
                                    }
                                ]"
                allow-clear
                placeholder="请选择"
                :max-tag-count="1"
                v-model:value="state.gantFilter.taskType"
                @change="getGantData"
              />
            </a-form-item>
          </div>
          <a-button type="primary" @click="resetGant"> 重置 </a-button>

          <a-button type="primary" @click="scrollToTodayColumn">今天</a-button>
        </div>
      </div>
      <div class="kb-table-box">
        <a-table
          bordered
          :pagination="false"
          :columns="state.kbColumns"
          :data-source="state.kbDataSource"
          :scroll="{ x: 'max-content', y: 600 }"
          ref="kbTbRef"
          :loading="state.gantLoading"
          rowKey="key"
          @resizeColumn="handleTaskResizeColumn"
        >
          <template #headerCell="{ title, column }">
            <template v-if="column.today">
              <div class="colun-today"
                >{{ title }}
                <div class="today-line"></div>
                <div class="today-flag">今天</div>
              </div>
            </template>
          </template>
          <template #bodyCell="{ column, record, text }">
            <template
              v-if="
                                ![
                                    '项目名称',
                                    '月份',
                                    '总目标',
                                    '子目标',
                                    '用户故事',
                                    '任务名称',
                                    '任务状态',
                                    '计划开始',
                                    '计划结束',
                                    '负责人'
                                ].includes(column.title)
                            "
            >
              <div class="color-div" v-if="text">
                <div
                  class="div-item"
                  :style="{
                                        backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                    }"
                ></div>
                <div class="line-table" v-if="text.today"></div>
                <div
                  class="div-item"
                  :style="{
                                        backgroundColor: getColor(text.actual)
                                    }"
                >
                </div>
              </div>
              <div v-else class="color-div">
                <div class="div-item"></div>
                <div class="line-table" v-if="column.today"></div>
                <div class="div-item"> </div>
              </div>
            </template>
            <template v-if="column.title === '用户故事'">
              <div class="default-gant-title-xmjd" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
              }}</div>
            </template>
            <template v-if="column.title === '任务名称'">
              <div class="default-gant-title-rwmc" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
              }}</div>
            </template>
            <template v-if="column.title === '总目标'">
              <div class="default-gant-title-total" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
              }}</div>
            </template>
            <template v-if="column.title === '子目标'">
              <div class="default-gant-title-zmb" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
              }}</div>
            </template>
          </template>
        </a-table>
      </div>
      <!-- end vid_3prxn0mxu3 自定义模板_x1ogqkqkx8 -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      'id': {
            type: [String,Number],
            default: undefined,
        },
      'time': {
            type: [String],
            default: undefined,
        },
      'projectName': {
            type: [String],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  const { id, time, projectName } = props
      const useId = ref()
      const useYear = ref()
      const useMonth = ref()
      const useName = ref()
      const useTimeList = ref([])
      import { watchEffect } from 'vue'
      watchEffect(() => {
          if (props.id||props.projectName) {
              setTimeout(() => {
                  useId.value = props.id
                  if (props.time) {
                      const [year, month] = props.time.split('-')
                      useYear.value = year
                      useMonth.value = props.time
                  }
                  if (props.projectName) {
                      useName.value = props.projectName
                  }
                  getGantData()
              }, 500)
          }
      })
      //     获取项目
      function getProjectList() {
          get(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/related/${useId.value} `).then(
              data => {
                  state.projectList = data.data
              }
          )
      }
      const state = reactive({
          radioValue: '目标',
          searchForm: {
              dateYear: '',
              projectType: undefined,
              projectIdList: [],
              userList: []
          },
          gantLoading: false,
          projectList: [],
          gantFilter: {
              projectId: undefined,
              month: undefined,
              taskType: 'ALL'
          },
          kbDataSource: [],
          kbColumns: [],
          gantColumns: [],
          sopFinish: 0,
          taskFinish: 0,
          targetFinish: 0
      })
      const currentData = ref({})
      const targetColumns = ref([
          {
              title: '项目详情',
              align: 'center',
              children: [
                  {
                      title: '月份',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'month',
                      ellipsis: true,
                      customCell: ({ monthRowSpan }) => {
                          return {
                              rowSpan: monthRowSpan
                          }
                      }
                  },
                  {
                      title: '总目标',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'goals',
                      resizable: true,
                      ellipsis: true,
                      customCell: ({ goalsRowSpan }) => {
                          return {
                              rowSpan: goalsRowSpan
                          }
                      }
                  },
                  {
                      title: '子目标',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'projectGoals',
                      resizable: true,
                      ellipsis: true,
                      customCell: ({ projectGoalsRowSpan }) => {
                          return {
                              rowSpan: projectGoalsRowSpan
                          }
                      }
                  },
                  {
                      title: '用户故事',
                      width: 100,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'storyName',
                      ellipsis: true,
                      customCell: ({ milepostRowSpan }) => {
                          return {
                              rowSpan: milepostRowSpan
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      width: 300,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'taskName',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '任务状态',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskStatus',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划开始',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'startTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划结束',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'endTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '负责人',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskOwner',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  }
              ]
          }
      ])
      const projectCoumns = ref([
          {
              title: '项目详情',
              align: 'center',
              children: [
                  {
                      title: '项目名称',
                      width: 100,
                      align: 'center',
                      fixed: 'left',
                      dataIndex: 'projectName',
                      ellipsis: true,
                      customCell: ({ projectRowSpan }) => {
                          return {
                              rowSpan: projectRowSpan
                          }
                      }
                  },
                  {
                      title: '用户故事',
                      width: 100,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'storyName',
                      ellipsis: true,
                      customCell: ({ milepostRowSpan }) => {
                          return {
                              rowSpan: milepostRowSpan
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      width: 280,
                      fixed: 'left',
                      resizable: true,
                      align: 'center',
                      dataIndex: 'taskName',
                      ellipsis: true
                  },
                  {
                      title: '任务状态',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskStatus',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划开始',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'startTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '计划结束',
                      width: 80,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'endTime',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  },
                  {
                      title: '负责人',
                      width: 60,
                      fixed: 'left',
                      align: 'center',
                      dataIndex: 'taskOwner',
                      ellipsis: true,
                      customCell: () => {
                          return {
                              style: {
                                  padding: '0 5px'
                              }
                          }
                      }
                  }
              ]
          }
      ])
      const kbTbRef = ref(null)

      function getGantData() {

          state.gantLoading = true
          //   TODO调甘特图
          post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/gantt/search', {
              projectId: useId.value,
              projectName: useName.value,
              dateYear: useYear.value,
              taskType: state.gantFilter.taskType,
              monthList: useMonth.value ? [useMonth.value, useMonth.value] : undefined,
              ganttTypeEnum: state.radioValue === '目标' ? 'GOALS' : 'PROJECT',
              sprintId: state.gantFilter.projectId ? state.gantFilter.projectId : null
          })
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      state.kbDataSource = []
                      if (state.radioValue === '项目') {
                          state.kbDataSource = []
                          state.kbColumns = [...projectCoumns.value]
                      } else {
                          state.kbDataSource = []
                          state.kbColumns = [...targetColumns.value]
                      }
                      return
                  }
                  let columns = data.data.columns.map(item => {
                      return {
                          ...item, // 保留其他字段
                          children: item.children.map(child => ({
                              ...child,
                              width: 20 // 强制设置相同宽度
                          }))
                      }
                  })
                  state.gantColumns = columns
                  // 格式化函数
                  const formattedData =
                      (Array.isArray(data.data.dataSource) ? data.data.dataSource : []).map((item, index) => {
                          const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                          return {
                              ...rest, // 保留其他字段
                              ...dataMap, // 将 dataMap 展开为直接字段
                              key: item.id || `key-${index}-${Date.now()}` // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                          }
                      }) || []

                  state.kbDataSource = formattedData
                  if (state.radioValue === '项目') {
                      state.kbDataSource = groupData(state.kbDataSource)
                      state.kbColumns = [...projectCoumns.value, ...state.gantColumns]
                  } else {
                      state.kbDataSource = groupTargetData(state.kbDataSource)
                      console.log(state.kbDataSource)
                      state.kbColumns = [...targetColumns.value, ...state.gantColumns]
                  }
                  state.sopFinish = data.data.sopRatio
                  state.taskFinish = data.data.userStoryRatio

                  scrollToTodayColumn()
              })
              .finally(() => {
                  state.gantLoading = false
              })
      }
      function groupData(data) {
          let currentProjectName = ''
          let currentMilepostName = ''
          let projectRowSpan = 0
          let milepostRowSpan = 0

          return data.map((item, index) => {
              // 如果 projectName 变化，重置 projectRowSpan，并计算新的 rowSpan
              if (currentProjectName !== item.projectName) {
                  currentProjectName = item.projectName
                  projectRowSpan = 1

                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].projectName === item.projectName) {
                          projectRowSpan++
                      } else {
                          break
                      }
                  }
                  item.projectRowSpan = projectRowSpan
              } else {
                  item.projectRowSpan = 0
              }

              // 如果 storyName 变化，重置 milepostRowSpan，并计算新的 rowSpan
              if (currentMilepostName !== item.storyName) {
                  currentMilepostName = item.storyName
                  milepostRowSpan = 1

                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].storyName === item.storyName) {
                          milepostRowSpan++
                      } else {
                          break
                      }
                  }
                  item.milepostRowSpan = milepostRowSpan
              } else {
                  item.milepostRowSpan = 0
              }

              return item
          })
      }
      function groupTargetData(data) {
          let currentMilepostName = ''
          let currentProjectGoals = ''
          let currentGoals = ''
          let currentMonth = ''

          let milepostRowSpan = 0
          let projectGoalsRowSpan = 0
          let goalsRowSpan = 0
          let monthRowSpan = 0

          return data.map((item, index) => {
              let tempProjectGoals = currentProjectGoals
              // 如果 storyName 和 projectGoals 都变化，重置 milepostRowSpan，并计算新的 rowSpan
              if (currentMilepostName !== item.storyName || currentProjectGoals !== item.projectGoals) {
                  currentMilepostName = item.storyName
                  currentProjectGoals = item.projectGoals
                  milepostRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].storyName === item.storyName && data[i].projectGoals === item.projectGoals) {
                          milepostRowSpan++
                      } else {
                          break
                      }
                  }
                  item.milepostRowSpan = milepostRowSpan
              } else {
                  item.milepostRowSpan = 0
              }

              // 如果 projectGoals 变化，重置 projectGoalsRowSpan，并计算新的 rowSpan
              if (tempProjectGoals !== item.projectGoals) {
                  currentProjectGoals = item.projectGoals
                  projectGoalsRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].projectGoals === item.projectGoals) {
                          projectGoalsRowSpan++
                      } else {
                          break
                      }
                  }
                  item.projectGoalsRowSpan = projectGoalsRowSpan
              } else {
                  item.projectGoalsRowSpan = 0
              }

              // 如果 goals 变化，重置 goalsRowSpan，并计算新的 rowSpan
              if (currentGoals !== item.goals) {
                  currentGoals = item.goals
                  goalsRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].goals === item.goals) {
                          goalsRowSpan++
                      } else {
                          break
                      }
                  }
                  item.goalsRowSpan = goalsRowSpan
              } else {
                  item.goalsRowSpan = 0
              }

              // 如果 month 变化，重置 monthRowSpan，并计算新的 rowSpan
              if (currentMonth !== item.month) {
                  currentMonth = item.month
                  monthRowSpan = 1
                  for (let i = index + 1; i < data.length; i++) {
                      if (data[i].month === item.month) {
                          monthRowSpan++
                      } else {
                          break
                      }
                  }
                  item.monthRowSpan = monthRowSpan
              } else {
                  item.monthRowSpan = 0
              }

              return item
          })
      }
      function scrollToTodayColumn() {
          const table = kbTbRef.value.$el.querySelector('.ant3-table-body')
          const todayColumnIndex = state.kbColumns.flatMap(col => col.children || col).findIndex(col => col.today)
          if (todayColumnIndex !== -1 && table) {
              const columnWidth = 20 // 假设每列宽度为 50，根据实际列宽度调整

              // 等待渲染完成后进行滚动
              nextTick(() => {
                  setTimeout(() => {
                      const headerCells = table.querySelectorAll('.ant-table-thead th')
                      headerCells.forEach((cell, index) => {
                          const column = state.kbColumns[index]
                          if (column.width) {
                              cell.style.width = column.width + 'px'
                          }
                      })
                      table.scrollLeft = todayColumnIndex * columnWidth - 850 // 减去 500 像素的偏移量
                  }, 100) // 可以根据需要调整延迟时间（比如 100 毫秒）
              })
          }
      }
      function resetGant() {
          state.gantFilter.projectId = undefined
          state.gantFilter.taskType = 'ALL'
          getGantData()
      }
      const colorMap = {
          'plan': '#FFE58F',
          'default': '#C7F870',
          'delay': '#FC4C29'
      }

      function getColor(record) {
          if (!record) return '#fff' // 默认值
          return colorMap[record] || '#C7F870' // 如果没有匹配到颜色，则返回默认颜色
      }
      function radioChange() {
          state.kbDataSource = []
          if (state.radioValue === '项目') {
              state.gantFilter.month = undefined
          } else {
              state.gantFilter.projectId = undefined
              const currentMonth = dayjs().format('YYYY-MM')
              state.gantFilter.month = currentMonth
          }
          getGantData()
      }
      import {nextTick} from 'vue'
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  /*样式*/
      .modal-title {
          margin-bottom: 16px;
          display: flex;
          justify-content: space-between;
      }
      .left,
      .right {
          gap: 10px;
          display: flex;
          align-items: center;
      }
      .tip-color {
          display: flex;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
          align-items: center;
          gap: 4px;
      }
      .right-tip {
          height: 32px;
          line-height: 32px;
      }
      .kb-table-box {
          position: relative;
          margin-bottom: 29px;
      }
      .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #d7e3ff;
          color: #262626;
          font-weight: 600;
          padding: 0;
      }

      .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 0;

          .word-wrap {
              word-break: break-all !important;
          }
      }
      .colun-today {
          position: relative;
      }
      .today-line {
          position: absolute;
          top: -23px;
          height: 50px;
          left: 47%;
          background-color: #fff;
          width: 1px;
          border-left: 1px dashed #3875ff;
      }
      .today-flag {
          position: absolute;
          top: -23px;
          left: -8px;
          width: 35px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          background-color: #3875ff;
          text-align: center;
          opacity: 0.6;
      }
      .color-div {
          position: relative;
          height: 26px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }
      .div-item {
          flex: 1;
      }
      .line-table {
          position: absolute;
          top: -5px;
          height: 50px;
          left: 50%;
          background-color: #fff;
          width: 1px;
          border-left: 1px dashed #3875ff;
      }
      .default-gant-title-xmjd,
      .default-gant-title-rwmc,
      .default-gant-title-total,
      .default-gant-title-zmb {
          padding: 0 5px;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
      }
      .default-gant-title-rwmc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 300px;
      }
      .box1,
      .box2,
      .box3 {
          width: 32px;
          height: 8px;
          background: #ffe58f;
      }

      .box2 {
          background: #c7f870;
      }

      .box3 {
          background: #fc4c29;
      }
</style>